.gradio_bg[theme="grass"] {
    @apply dark:bg-gray-700;
}
.gradio_bg[theme="grass"] .gradio_interface {
    .component_set {
        @apply bg-gray-50 dark:bg-gray-800 rounded-none;
    }
    .component {
        @apply p-1 transition;
    }
    .panel_header {
        @apply text-gray-400 dark:text-gray-200 font-semibold;
    }
    .panel_button {
        @apply rounded-none bg-gray-100 dark:bg-gray-800 shadow;
    }
    .panel_button.submit {
        @apply bg-green-400 text-white;
    }
    .examples {
        .examples_table_holder:not(.gallery) {
            .examples_table {
                @apply dark:bg-gray-800;
                tbody tr:hover {
                    @apply bg-green-400;
                }
            }
        }
        .examples_table_holder.gallery .examples_table {
            tbody td {
                @apply dark:bg-gray-800;
            }
            tbody td:hover {
                @apply bg-green-400;
            }
        }
    }

    /* Input Components */
    .input_text {
        textarea,
        input {
            @apply rounded-none dark:bg-gray-700 dark:text-gray-50 box-border border-4 p-2 border-white dark:border-gray-600 focus:border-green-400 dark:focus:border-green-400;
        }
    }
    .input_number {
        input {
            @apply rounded-none dark:bg-gray-700 dark:text-gray-50 box-border border-4 p-2 border-white dark:border-gray-600 focus:border-green-400 dark:focus:border-green-400;
        }
    }
    .input_slider {
        .range {
            @apply dark:bg-gray-700 rounded-none;
        }
        .range::-webkit-slider-thumb {
            @apply bg-green-400 rounded-none shadow-sm;
        }
        .range::-moz-range-thumb {
            @apply bg-green-400 rounded-none shadow-sm;
        }
        .value {
            @apply font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-50;
        }
    }
    .input_radio {
        .radio_item {
            @apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
        }
        .radio_circle {
            @apply hidden;
        }
        .radio_item.selected {
            @apply bg-green-400 text-white shadow;
        }
        .radio_circle {
            @apply w-4 h-4 bg-white transition rounded-full box-border;
        }
    }

    .input_checkbox_group,
    .input_checkbox {
        .checkbox_item {
            @apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
        }
        .checkbox_item.selected {
            @apply bg-green-400 text-white shadow;
        }
    }
    .input_checkbox {
        .checkbox {
            @apply bg-gray-200;
        }
        .selected .checkbox {
            @apply bg-green-500;
        }
    }
    .input_checkbox_group .checkbox {
        @apply hidden;
    }

    .input_dropdown {
        .selector {
            @apply bg-gray-100 rounded-none dark:bg-gray-700 dark:text-gray-50;
        }
        .dropdown_menu {
            @apply shadow;
        }
        .dropdown_item {
            @apply bg-gray-100 dark:bg-gray-800 hover:bg-green-400 hover:text-gray-50 hover:font-semibold;
        }
        .dropdown_item:first-child,
        .dropdown_item:last-child {
            @apply rounded-none;
        }
    }
    /* Components */
    .output_label {
        .confidence {
            @apply bg-gray-300 text-white dark:bg-gray-600 font-semibold;
        }
        .confidence:first-child {
            @apply bg-green-400;
        }
    }
}
